<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>渐变纹理</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        let osm = Cesium.createOpenStreetMapImageryProvider({
            url: 'https://a.tile.openstreetmap.org/'
        });
        let viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider: osm,
            contextOptions: {
                webgl: {
                    alpha: true
                }
            },
            selectionIndicator: false,
            animation: false,  //是否显示动画控件
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: false, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false,  //是否显示点击要素之后显示的信息
            fullscreenButton: false
        });
        //取消双击事件
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        //设置homebutton的位置
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
            Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)
        //设置初始位置
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
        });

        //开启深度检测
        viewer.scene.globe.depthTestAgainstTerrain = true;

        viewer.entities.add({
            name: 'Red wall at height',
            wall: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                    121.444409, 31.247417, 200.0,
                    121.533521, 31.235685, 200.0,
                    121.563273, 31.190347, 200.0,
                    121.546744, 31.194054, 200.0,
                    121.516705, 31.191459, 200.0,
                    121.502188, 31.203074, 200.0
                ]),
                minimumHeights: [3000.0, 2000.0, 2000, 2000, 2000, 3000],
                material: getColorRamp([0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0], true)
            }
        });

        viewer.entities.add({
            name: 'Red wall at height',
            wall: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                    121.554409, 31.247417, 200.0,
                    121.643521, 31.235685, 200.0,
                    121.673273, 31.190347, 200.0,
                    121.656744, 31.194054, 200.0,
                    121.626705, 31.191459, 200.0,
                    121.612188, 31.203074, 200.0
                ]),
                minimumHeights: [3000.0, 2000.0, 2000, 2000, 2000, 3000],
                material: getColorRamp([0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0], false)
            }
        });

        viewer.zoomTo(viewer.entities);


        function getColorRamp(elevationRamp, isVertical = true) {
            let ramp = document.createElement('canvas');
            ramp.width = isVertical ? 1 : 100;
            ramp.height = isVertical ? 100 : 1;
            let ctx = ramp.getContext('2d');

            let values = elevationRamp;
            let grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0);
            grd.addColorStop(values[0], '#000000'); //black
            grd.addColorStop(values[1], '#2747E0'); //blue
            grd.addColorStop(values[2], '#D33B7D'); //pink
            grd.addColorStop(values[3], '#D33038'); //red
            grd.addColorStop(values[4], '#FF9742'); //orange
            grd.addColorStop(values[5], '#ffd700'); //yellow
            grd.addColorStop(values[6], '#ffffff'); //white

            ctx.fillStyle = grd;
            if (isVertical)
                ctx.fillRect(0, 0, 1, 100);
            else
                ctx.fillRect(0, 0, 100, 1);
            return ramp;
        }

    </script>
</body>

</html>